<template>
  <div>
    <!-- header -->
    <div class="header">
      <div class="vantsearch">
        <form action="/">
          <van-search
            shape="round"
            v-model="inputValue"
            placeholder="请输入搜索关键词"
            input-align="left"
            @search="onSearch"
            @cancel="onCancel2"
            @input="onInput"
          />
        </form>
      </div>

      <button @click="$router.back(-1)">取消</button>
    </div>
    <div v-show="scene == 1">
      <!-- 历史记录 -->
      <div class="hot" v-show="searchHistory.length > 0">
        <div class="history">
          <p>历史记录</p>
          <van-icon
            name="delete-o"
            class="delete"
            @click="deleteHistory"
            size=""
          />
        </div>
        <div class="list">
          <span
            @click="clickHistory(searchItem)"
            :key="index"
            v-for="(searchItem, index) in searchHistory"
            >{{ searchItem }}</span
          >
        </div>
      </div>
      <!-- 热门搜索列表 -->
      <div class="hot">
        <p>热门搜索</p>
        <div class="list">
          <span
          @click="hotClick(hotItem.keyword)"
            :key="index"
            :class="{ active: hotItem.highlight == 1 }"
            v-for="(hotItem, index) in hotList"
            >{{ hotItem.keyword }}</span
          >
        </div>
      </div>
    </div>

    <div v-show="scene == 2" class="autoList">
      <p
        @click="clickAuto(autoItem)"
        :key="index"
        v-for="(autoItem, index) in autoList"
      >
        {{ autoItem }}<van-icon name="arrow" style="float: right" />
      </p>
    </div>

    <div v-show="scene == 3">
      <van-list
        :immediate-check="true"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <GoodsList :itemList="shopList" v-show="shopList.length>0"/>
          <p v-show="shopList.length<=0">暂无内容或请求超时，请重新搜索</p>
      </van-list>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import GoodsList from "@/pages/item/goodsList";
import debounce from 'lodash/debounce';
export default {
  name: "Search",
  components: {
    GoodsList,
  },
  data() {
    return {
      //
      scene: 1,
      inputValue: "",
      list: [],
      loading: false,
      finished: false,
      searchHistory: JSON.parse(localStorage.getItem("searchHistory")) || [],
    };
  },
  computed: {
    ...mapState({
      hotList: (state) => state.search.hotList,
      autoList: (state) => state.search.autoList,
      shopList: (state) => state.search.shopList,
    }),
  },
  mounted() {
    this.getHost();
  },
  watch: {
    inputValue(param) {
      if (!param) {
        this.scene = 1;
      }
    },
  },
  methods: {
    hotClick(item){
      // console.log(item);
      this.getshopList(item);
      // this.setStorage(item);
    },
    clickHistory(item) {
      this.getshopList(item);
      // this.setStorage(item);
    },
    //删除历史记录
    deleteHistory() {
      localStorage.removeItem("searchHistory");
      this.searchHistory = [];
    },
    //设置本地存储
    setStorage(item) {
      let res = JSON.parse(localStorage.getItem("searchHistory"));
      if (res) {
        if (res.indexOf(item) != -1) {
          res.splice(res.indexOf(item), 1);
        }
      } else {
        res = [];
      }
      res.unshift(item);
      this.searchHistory = res;
      localStorage.setItem("searchHistory", JSON.stringify(res));
    },

    //点击实时关键字的回调
    clickAuto(autoItem) {
      this.setStorage(autoItem);
      this.getshopList(autoItem);
    },

    //搜索的回调
    onSearch() {
      this.setStorage(this.inputValue);
      // console.log(this.inputValue);
      this.getshopList(this.inputValue);
    },

    //根据关键字请求商品列表

    async getshopList(item) {
      await this.$store.dispatch("getSearchList", item);
      this.scene = 3;
    },
    onInput:debounce(function() {
      if (this.inputValue) {
        this.scene = 2;
      }
      this.$store.dispatch("getAutoList", this.inputValue);
    },100) ,
    onCancel2() {
      console.log("quxiao");
    },

    getHost() {
      this.$store.dispatch("getHost");
    },
    onLoad() {
      // console.log(222);
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 10000);
    },
  },
};
</script>

<style lang="less" scoped>
.autoList {
  padding: 0 10px;
  font-size: 20px;
}
.history {
  display: flex;
  justify-content: space-between;
  .delete {
    margin-top: 20px;
  }
}
.hot {
  padding: 0 10px;
  font-size: 15px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  .title {
  }
  span {
    font-size: 10px;
    padding: 5px 20px;
    border: 1px solid black;
    margin-right: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    &.active {
      border: 1px solid red;
    }
  }
}
.header {
  width: 100%;
  height: 50px;
  .image {
    float: left;
    img {
      width: 60px;
      height: 25px;
      margin-left: 20px;
      margin-top: 15px;
    }
  }

  .vantsearch {
    width: 330px;
    height: 30px;
    .searchipt {
      height: 30px;
      width: 330px;
      margin-top: 10px;
    }
  }
  button {
    float: right;
    width: 40px;
    height: 20px;
    font-size: 5px;
    color: black;
    background: white;
    border: 1px solid black;
    border-radius: 5px;
    position: relative;
    bottom: 12px;
    right: 10px;
  }
}
</style>